import React, { useState, useEffect } from 'react';
import { Table, Button, message, Modal } from 'antd';
import styles from './rechargeAudit.module.css';
import { _apiRechargeAuditList, _apiRechargeAudit } from '../../../api';
import Notification, { showNotification } from '../../../components/message/message';

const RechargeAudit = () => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  // 获取充值审核列表
  const fetchRechargeList = async () => {
    try {
      setLoading(true);
      // 这里替换为实际的 API 调用
      const response = await _apiRechargeAuditList();
      const data = response.data;
      setDataSource(data);
    } catch (error) {
      message.error('获取列表失败');
    } finally {
      setLoading(false);
    }
  };

  // 添加处理审核的函数
  const handleAudit = async (status) => {
    try {
      if (!currentRecord) return;
      
      await _apiRechargeAudit({
        ids: currentRecord.id.toString()
      });
      
      showNotification('审核成功', 'success');
      setModalVisible(false);
      fetchRechargeList();
    } catch (error) {
      showNotification('审核失败', 'error');
    }
  };

  const columns = [
    {
      title: '订单号',
      dataIndex: 'tradeNo',
      key: 'tradeNo',
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '充值金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount) => `¥${amount}`,
    },
    {
      title: '充值时间',
      dataIndex: 'addTime',
      key: 'addTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          0: '待审核',
          1: '已通过',
          2: '已拒绝',
        };
        return statusMap[status];
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        record.status === 0 ? (
          <Button 
            type="primary" 
            onClick={() => {
              setCurrentRecord(record);
              setModalVisible(true);
            }}
          >
            审核
          </Button>
        ) : null
      ),
    },
  ];

  useEffect(() => {
    fetchRechargeList();
  }, []);

  return (
    <div className={styles.container}>
      <Notification />
      <h2 className={styles.title}>充值审核</h2>
      <Table
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowKey="id"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
        }}
      />

      <Modal
        title="充值审核"
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
      >
        <div className={styles.modalContent}>
          <p>订单号：{currentRecord?.tradeNo}</p>
          <p>充值金额：¥{currentRecord?.amount}</p>
          <div className={styles.modalButtons}>
            <Button type="primary" onClick={() => handleAudit(1)}>
              通过
            </Button>
            {/* <Button danger onClick={() => handleAudit(2)}>
              拒绝
            </Button> */}
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default RechargeAudit;   